<!--
 * @Descripttion: 菜单选项
 * @Author: 银河以北
 * @Date: 2021-09-22 19:36:03
 * @LastEditors: 银河以北
 * @LastEditTime: 2021-10-09 15:44:27
-->
<template>
  <div class='menu-container'>
    <div class='container'>
      <!-- 头像 and 菜单 -->
      <div class='menu-top'>
        <div
          class="item"
          style="margin-bottom:10px"
        >
          <el-popover
            ref="popover"
            placement="right"
            :width="200"
            trigger="click"
          >
            <div class='user-info'>
              <div class="user-info-avatar">
                <el-avatar
                  :size="70"
                  :src="$utils.imgUrl(userInfo?.avatar_url)"
                ></el-avatar>
              </div>
              <div class='user-info-name'>
                <h3><span>{{userInfo?.nickname}} </span><span v-if="userInfo?.gender==1">
                    <el-icon
                      :size='16'
                      color='#409EFF'
                    >
                      <Male />
                    </el-icon>
                  </span>
                  <span v-else>
                    <el-icon
                      :size='16'
                      color='pink'
                    >
                      <Female />
                    </el-icon>
                  </span>
                </h3>
              </div>
            </div><template #reference>
              <el-avatar
                :size="50"
                :src="$utils.imgUrl(userInfo?.avatar_url)"
              ></el-avatar>
            </template>
          </el-popover>
        </div>
        <div
          class="item"
          @click="changeMenu('ChatDotRound')"
          :class='{"active-item":activeMenuItem=="ChatDotRound"}'
        >
          <div class='item-icon'>
            <el-icon :size='20'>
              <ChatDotRound />
            </el-icon>
          </div>
        </div>
        <div
          class="item"
          @click="changeMenu('ChatLineSquare')"
          :class='{"active-item":activeMenuItem=="ChatLineSquare"}'
        >
          <div class='item-icon'>
            <el-icon :size='20'>
              <ChatLineSquare />
            </el-icon>
          </div>
        </div>
      </div>
      <!-- 退出按钮 -->
      <div class='sign-out'>
        <div class="item">
          <div class='item-icon'>
            <el-popover
              placement="right"
              :width="200"
              trigger="click"
            >
              <div>
                <p>主题
                  <el-icon
                    class='theme-icon'
                    v-if='themeStyle'
                    @click="changeThemeStyle"
                  >
                    <Sunny />
                  </el-icon>
                  <el-icon
                    class='theme-icon'
                    v-else
                    @click="changeThemeStyle"
                  >
                    <Moon />
                  </el-icon>
                </p>
              </div>

              <template #reference>
                <el-icon :size='20'>
                  <Setting />
                </el-icon>
              </template>
            </el-popover>
          </div>
        </div>
        <div class="item">
          <div class='item-icon'>
            <el-icon
              :size='20'
              @click="signOut"
            >
              <SwitchButton />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <!-- <div @click="toTest"><button>测试页面</button></div> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed, watch } from "vue";

//vuex
import { useStore } from "vuex";

import { useRouter, useRoute } from "vue-router";

import { ElMessageBox, ElMessage } from "element-plus";

//svg-icon
import {
  QuestionFilled,
  SwitchButton,
  Setting,
  ChatDotRound,
  ChatLineSquare,
  Sunny,
  Moon,
  Male,
  Female,
} from "@element-plus/icons";
export default defineComponent({
  name: "MenuList",
  components: {
    QuestionFilled,
    SwitchButton,
    Setting,
    ChatDotRound,
    ChatLineSquare,
    Sunny,
    Moon,
    Male,
    Female,
  },
  setup(props, { emit }) {
    //活动的菜单选项
    let activeMenuItem = ref("ChatDotRound");

    //主题样式 判断是白天还是黑夜
    let themeStyle = ref(false);

    //引入vuex
    const store = useStore();

    //返回用户信息
    const userInfo = computed(() => {
      return store.getters.userInfo;
    });
    //切换菜单
    const changeMenu = (menuName: string) => {
      activeMenuItem.value = menuName;
      emit("changeChatStatus", activeMenuItem.value);
    };

    //引入路由对象
    const router = useRouter();

    //切换主题样式
    const changeThemeStyle = () => {
      themeStyle.value = !themeStyle.value;
      let STYLE = "day";
      if (themeStyle.value) {
        STYLE = "day";
      } else {
        STYLE = "night";
      }
      window.document.documentElement.setAttribute("theme-style", STYLE);
    };

    //退出
    const signOut = () => {
      ElMessageBox.confirm(
        "<i style='color:red'>你确定要退出当前登陆吗？</i>",
        "你好，银河以北",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
          type: "warning",
        }
      ).then(() => {
        store.dispatch("Logout").then((res) => {
          if (res) {
            ElMessage({
              type: "success",
              message: "退出成功，欢迎下次再来！",
            });
            router.replace("/");
          }
        });
      });
    };

    //判断是不是一对一聊天
    let isChat = ref<boolean>(true);

    const toTest = () => {
      router.push("/test");
      // console.log();
    };

    return {
      userInfo, //用户信息

      activeMenuItem, //活动的菜单选项

      themeStyle, //主题样式

      changeMenu, //切换菜单

      changeThemeStyle, //切换主题样式

      signOut, //退出

      isChat, //判断是不是一对一聊天

      toTest,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "~@/style/common/main.scss";
@import "@/style/minxin.scss";
.menu-container {
  width: 70px;
  height: 100%;
  .container {
    width: 100%;
    height: 100%;

    //sass改变样式方法
    @include menuContainerBackGround();
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .menu-top {
      margin-top: 5px;
    }

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 50px;
      cursor: pointer;
      .item-icon {
        cursor: pointer;
      }
    }
    .active-item {
      position: relative;
    }
    .active-item::before {
      position: absolute;
      width: 3px;
      height: 100%;
      content: "";
      top: 0;
      left: 0;
    }
  }
}
.theme-icon {
  margin: 5px;
  cursor: pointer;
}
.user-info {
  width: 100%;
  &-avatar {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  &-name {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
}
</style>